<template>
    <div class="release">
        <div class="header">
            <div class="num">
                <h2>{{dataday}}</h2>
            </div>
            <div class="date">
                <div class="day">
                    <p>{{date}}</p>
                </div>
                <div>
                    <p>/</p>
                </div>
                <div class="year">
                    <p>2022年09月</p>
                </div>
            </div>
            <!-- <div class="right">
                <div class="top">
                    <p>八月</p>
                    <div class="bottom">
                        <p>廿九</p>
                    </div>
                </div>
            </div> -->
            <!-- <span class="last">X</span> -->
        </div>

        <div class="main">
            <h3>选择你要发布的东东...</h3>
            <div class="itemz">
                <div class="item" v-for="(item,index) in imgLists" :key="index" @click="goon(item.id)">
                    <div class="img">
                        <img :src="item.img" alt="">
                    </div>
                    <div class="content">
                        <p>{{item.name}}</p>
                    </div>
                </div>
                
            </div>
            
            
        </div>


        <div class="duo"></div>

         <div class="footer">
            <ul>
                <router-link tag="li" to="/home">
                    <a >
                        <div class="img">
                            <img src="../assets/img/shouye.png" alt="">
                        </div>
                        <div class="word">
                            <p >首页</p>
                        </div>
                    </a>
                </router-link>
                <router-link tag="li" to="/talk">
                    <a>
                        <div class="img">
                            <img src="../assets/img/taolun.png" alt="">
                        </div>
                        <div class="word">
                            <p >交流</p>
                        </div>
                    </a>
                </router-link>
                <router-link tag="li" to="/release">
                    <a >
                        <div class="img imgz">
                            <img src="../assets/img/fabulow1.png" alt="" class="con">
                        </div>
                        <div class="word">
                            <p class="con">发布</p>
                        </div>
                    </a>
                </router-link>
                <router-link tag="li" to="/find">
                    <a>
                        <div class="img">
                            <img src="../assets/img/quan.png" alt="">
                        </div>
                        <div class="word">
                            <p>发现</p>
                        </div>
                    </a>
                </router-link>
                <router-link tag="li" to="/my">
                    <a>
                        <div class="img">
                            <img src="../assets/img/wo.png" alt="">
                        </div>
                        <div class="word">
                            <p>我的</p>
                        </div>
                    </a>
                </router-link>
            </ul>
        </div>

    </div>
</template>

<script>
import { getimgLists } from "../api/release";
    export default {
        data() {
            return {
                imgLists:null,
            };
        },
        methods:{
          goon(id){
            if(id==2){
              this.$router.push('/posting');
            }else if(id==1){
              if(window.localStorage.sign){
                this.$toast('已签到')
              }else{
                window.localStorage.setItem("sign","已签到")
                this.$toast('签到成功')
              }
              }
          }
        },
        computed:{
          date(){
            var date = new Date();
            var hours = date.getHours()<10?'0'+date.getHours():date.getHours();
            var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
            var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
            let week = date.getDay() // 星期
            let weekArr = [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ]
            return  hours + ':' + minutes + ':' + seconds + ' ' + weekArr[week]
          },
          dataday(){
              var date = new Date();
              var dayz = date.getDate()<10?'0'+date.getDate():date.getDate();
              return dayz;
          },
          yearz(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1;
            return year + '年' + month + '月';
          }
        },
        created(){
          getimgLists().then(data=>{
            this.imgLists = data.imgLists;
          })
        },
        mounted(){
          
        }
    }
</script>

<style lang="scss" scoped>
.release{
.header {
  display: flex;
  position: relative;
  background: #f8f8f8;
  height: 220px;
  align-items: center;
  .num {
    line-height: 62px;
    margin-right: 16px;
    margin-left: 40px;
    h2 {
      font-size: 50px;
      font-weight: normal;
    }
  }
  .date {
    margin-right: 16px;
    p {
      color: #c6c6c6;
      font-size: 14px;
    }
  }
  .top {
    height: 45px;
    width: 50px;
    background: #53bcf5;
    text-align: center;
    border-radius: 6px;
    color: #fff;
    .bottom {
      margin: auto;
      width: 46px;
      background: #fff;
      border-radius: 8px;
      color: #999;
    }
  }
  .last {
    position: absolute;
    top: 16px;
    right: 15px;
    color: #999;
  }
}
.main {
  h3 {
    color: #999;
    font-weight: normal;
    font-size: 14px;
    height: 48px;
    line-height: 48px;
    padding-left: 16px;
  }
  .itemz {
    display: flex;
    padding: 12px;
    flex-wrap: wrap;
    .item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 15px 0;
      .img {
        width: 50px;
        height: 50px;
        border-radius: 15px;
        img {
          width: 100%;
        }
      }
      .content {
        margin-top: 6px;
        font-size: 14px;
      }
    }
  }
}
.duo {
  height: 40px;
}

.footer {
  background: #fff;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  ul {
    display: flex;
    height: 40px;
    li {
      flex: 1;
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        .img {
          width: 24px;
          height: 24px;
          img {
            width: 100%;
          }
          &.con {
            transform: rotateX(180deg);
          }
        }
        .word {
          p {
            color: #999;
            font-size: 12px;
            &.con {
              color: #45dfe7;
            }
          }
        }
        .imgz {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: #53bcf5;
          margin-top: -26px;
          img {
            width: 24px;
            height: 24px;
            position: absolute;
            left: 0;
            top: -14px;
            right: 0;
            bottom: 0;
            margin: 0 auto;
          }
        }
      }
    }
  }
}
}
</style>